<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #message {
            text-align: center;
        }

        .container {
            width: 300px;
            height: 300px;
            margin: 82px 0 30px 800px;
        }

        .server {
            border: solid 1px green;
            width: 148px;
            height: 300px;
            float: left;
            text-align: left;
        }

        .client {
            border: solid 1px blue;
            width: 147px;
            height: 300px;
            float: right;
            text-align: right;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        window.onload = function () {
            var wsServer = 'ws://swoole.com:9503';
            var websocket = new WebSocket(wsServer);
            var msg = document.getElementById('message');
            websocket.onopen = function (evt) {
                var int = Math.random()*100;
                websocket.send('德玛西亚' + int);
                console.log("Connected to WebSocket server.");
                msg.innerText = 'Connected to WebSocket server.';
            };

            websocket.onclose = function (evt) {
                console.log("Disconnected");
                msg.innerText = 'Disconnected';
            };

            websocket.onmessage = function (evt) {
                console.log('Retrieved data from server: ' + evt.data);
                msg.innerText = evt.data;
            };

            websocket.onerror = function (evt, e) {
                console.log('Error occured: ' + evt.data);
                msg.innerText = 'Error occured: ' + evt.data;
            };
        };

        // $(function () {
        //     $('#send').click(function () {
        //         val = $('#val').val();
        //         console.log(val);
        //         $.ajax({
        //             type: 'post',
        //             dataType: 'json',
        //             url: 'http://swoole.com:9503',
        //             data: {name: val},
        //             success: function (data) {
        //                 console.log(data);
        //             }
        //         })
        //     });
        // })
    </script>
</head>
<body>
<h3 id="message"></h3>
<div class="container">
    <div class="server">
        服务器消息
    </div>
    <div class="client">
        客户端消息
    </div>
    <input id="val"/>
    <button id="send">发送</button>
</div>

</body>
</html>